<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-06 15:31:11
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2022-09-08 16:50:00
 * @FilePath: \jzjy\src\views\reset\restPass.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="content">
    <header>
      <div class="top"></div>
    </header>
    <main>
      <div class="box">
        <div class="top">
          <span>重置密码</span>
          <p @click="goLogin">返回账号登录</p>
        </div>
        <div class="step">
          <img src="../../assets/img/reset1.png" v-if="step == 1" />
          <img src="../../assets/img/reset2.png" v-if="step == 2" />
          <img src="../../assets/img/reset3.png" v-if="step == 3" />
          <span class="step1 stepTips">验证手机号码</span>
          <span class="step2 stepTips">设置新密码</span>
          <span class="step3 stepTips">密码重置成功</span>
        </div>
        <div class="reset" v-if="step == 1">
          <el-input
            v-model="userphone"
            placeholder="请输入手机号码"
            prefix-icon="el-icon-mobile"
            autocomplete
            maxlength="11"
            size="large"
            clearable
            @focus="phFocus"
          ></el-input>
          <p class="errorMsg1" v-show="errorPh">{{ errorMsgPh }}</p>
          <el-input
            v-model="yzm"
            placeholder="请输入短信验证码"
            prefix-icon="el-icon-message"
            maxlength="6"
            size="large"
            @focus="yzFocus"
          ></el-input>
          <p class="errorMsg2" v-show="errorYz">{{ errorMsgYz }}</p>
          <span class="getYzm" @click="getDx" v-if="!djsShow">获取验证码</span>
          <span class="getYzm" v-if="djsShow">重新发送 {{ countdown }}s</span>
          <div class="submit" v-if="step == 1" @click="goRestpw">下一步</div>
        </div>
        <div class="reset" v-if="step == 2">
          <el-input
            v-model="password"
            placeholder="请输入新密码"
            show-password
            prefix-icon="el-icon-lock"
            maxlength="16"
            size="large"
            clearable
            spellcheck="false"
            @focus="pwFocus"
          ></el-input>
          <p class="errorMsg3" v-show="errorPw">{{ errorMsgPw }}</p>
          <el-input
            v-model="passwordAg"
            placeholder="请再次输入新密码"
            show-password
            prefix-icon="el-icon-lock"
            maxlength="16"
            size="large"
            clearable
            spellcheck="false"
            @focus="pwFocusAg"
          ></el-input>
          <p class="errorMsg4" v-show="errorDif">{{ errorPwDif }}</p>
          <div class="submit" @click="resetPw">下一步</div>
        </div>
        <div class="reset" v-if="step == 3">
          <img src="../../assets/img/resetBg.png" />
          <h2>恭喜你，密码设置成功！</h2>
          <div class="route">
            <span class="timeNum">{{ timeNum }}s</span>后，自动跳转回<a
              @click="goLogin"
              >登录页面</a
            >重新登录
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { sendverf, checkphone, findpassbyphone } from "../../api/http";
export default {
  data() {
    return {
      step: 1, //当前进度
      userphone: "", //用户手机号
      yzm: "", //验证码
      yZaccount: "", //验证成功的账号
      password: "", //新密码
      passwordAg: "", //再次输入的新密码
      errorMsgPh: "手机号错误", //手机号错误提示信息
      errorMsgYz: "验证码错误", //验证码错误提示信息
      errorMsgPw: "请输入6-16位的数字和字母或添加符号", //设置密码不规范
      errorPwDif: "两次密码不一致", //重新设置密码错误提示信息
      errorPh: false, //账号错误提示信息隐藏
      errorYz: false, //验证码错误提示信息隐藏
      errorPw: false, //密码错误提示信息隐藏
      errorDif: false, //两次密码不同提示
      timeNum: 5, //跳转倒计时
      navitoTimer: null, //跳转定时器
      djsShow: false, //重新发送倒计时显示隐藏
      countdown: 60, //短信验证码再次发送倒计时
      dxTimer: null, //重新获取验证码倒计时
    };
  },

  methods: {
    //手机号框获取焦点
    phFocus() {
      this.errorPh = false;
    },
    // 验证码框获取焦点
    yzFocus() {
      this.errorYz = false;
    },
    //获取短信验证码
    getDx() {
      //电话号码正则验证，如果通过就发送验证码
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const reg_yzm = /^[0-9]*$/;
      if (this.userphone.trim() == "") {
        this.errorPn = true;
        this.errorMsgPn = "请填写手机号";
      } else if (!reg_tel.test(this.userphone)) {
        this.errorPn = true;
        this.errorMsgPn = "手机号格式错误";
      } else {
        //手机号码正常，发送短信验证码并倒计时60秒后才可重新发送
        sendverf({
          phone: this.userphone ? this.userphone : "",
        }).then((res) => {
          if (res.retInt == 1) {
            this.dxTimer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.djsShow = true;
                  console.log("daojishi");
                } else {
                  this.djsShow = false;
                  this.countdown = 60;
                  clearInterval(this.dxTimer);
                  console.log("倒计时");
                }
              }
            }, 1000);
          }
        });
      }
    },
    //新密码框获取焦点
    pwFocus() {
      this.errorPw = false;
    },
    //再次输入密码框获取焦点
    pwFocusAg() {
      this.errorDif = false;
    },
    //验证手机号，成功后跳转下一步
    goRestpw() {
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const reg_yzm = /^[0-9]*$/;
      if (this.userphone.trim() == "") {
        this.errorPh = true;
        this.errorMsgPh = "请填写手机号";
      } else if (!reg_tel.test(this.userphone)) {
        this.errorPh = true;
        this.errorMsgPh = "手机号格式错误";
      } else if (this.yzm.trim() == "") {
        this.errorYz = true;
        this.errorMsgYz = "请输入验证码";
      } else if (!reg_yzm.test(this.yzm)) {
        this.errorYz = true;
        this.errorMsgYz = "请输入数字验证码";
      } else {
        checkphone({
          account: this.userphone.trim(),
          msg_verf: this.yzm,
        }).then((res) => {
          if (res.retInt == 1) {
            this.yZaccount = res.retRes.account;
            console.log(res, "手机号码验证成功");
            this.step = 2;
          }
        });
      }
    },
    resetPw() {
      // const reg_psd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      const reg_psd = /^[0-9a-zA-Z]{6,16}$/
      if (!reg_psd.test(this.password)) {
        this.errorPw = true;
      } else if (this.password != this.passwordAg) {
        this.errorDif = true;
        console.log(this.password, this.passwordAg);
      } else {
        findpassbyphone({
          account: this.yZaccount,
          password: this.passwordAg,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "新密码创建成功");
            this.step = 3;
            this.navitoTimer = setInterval(() => {
              if (this.timeNum > 0) {
                this.timeNum--;
              } else if (this.timeNum == 0) {
                clearInterval(this.navitoTimer);
                this.$router.push("/login");
              }
            }, 1000);
          }
        });
      }
      // this.step = 3
    },
    goLogin() {
      this.$router.push("/login");
    },
  },
};
</script>
<style>
body {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}
</style>
<style lang="less" scoped>
#content {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  header {
    width: 100%;
    height: 100px;
    background-color: #fff;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    .top {
      width: 1200px;
      margin: 0 auto;
      line-height: 70px;
    }
  }
  main {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .box {
      margin: 0 auto;
      margin-top: 40px;
      border-radius: 5px;
      width: 100%;
      height: 820px;
      background-color: #fff;
      box-shadow: 20px #333;
      overflow: hidden;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        height: 78px;
        border-bottom: 1px solid #e6e6e6;
        span {
          font-size: 20px;
          font-weight: 600;
          color: #333;
          cursor: pointer;
        }
        p {
          font-size: 14px;
          color: #08a579;
          cursor: pointer;
        }
      }
      .step {
        position: relative;
        margin-top: 92px;
        margin-bottom: 84px;
        text-align: center;
        .stepTips {
          position: absolute;
          top: 45px;
          font-size: 14px;
          color: #999;
        }
        .step1 {
          left: 315px;
        }
        .step2 {
          left: 565px;
        }
        .step3 {
          left: 800px;
        }
      }
      .reset {
        position: relative;
        margin: 0 auto;
        width: 480px;
        /deep/.el-input {
          margin-bottom: 40px;
        }
        /deep/.el-input__inner {
          width: 480px;
          height: 60px;
        }
        .errorMsg1 {
          position: absolute;
          top: 65px;
          left: 5px;
          color: red;
        }
        .errorMsg2 {
          position: absolute;
          top: 165px;
          left: 5px;
          color: red;
        }
        .errorMsg3 {
          position: absolute;
          top: 63px;
          left: 5px;
          color: red;
        }
        .errorMsg4 {
          position: absolute;
          top: 163px;
          left: 5px;
          color: red;
        }
        .getYzm {
          position: absolute;
          top: 122px;
          right: 24px;
          color: #08a579;
          cursor: pointer;
        }
        .submit {
          margin-top: 30px;
          width: 480px;
          height: 60px;
          background: linear-gradient(270deg, #4ceabe, #1dbc8d);
          border-radius: 6px;
          text-align: center;
          line-height: 60px;
          color: #fff;
          cursor: pointer;
        }
        img {
          margin-left: 86px;
        }
        h2 {
          margin-top: 50px;
          text-align: center;
          font-size: 20px;
          color: #333;
        }
        .route {
          margin-top: 20px;
          text-align: center;
          font-size: 14px;
          color: #999999;
          user-select: none;
          .timeNum {
            color: #f6444e;
          }
          a {
            display: inline-block;
            margin: 0 3px;
            height: 17px;
            color: #08a579;
            border-bottom: 1px solid #08a579;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>